<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>业务管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui-v2.5.4/layui/bgfun.js"></script>

</head>

<body>

<form class="layui-form">
    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend style="font-size:16px;">业务信息</legend>
        </fieldset>
    </div>

    <div class="layui-form-item">


        <div class="layui-inline">
            <input type="hidden" id="id" name="id" value="${capService.id}"/>
            <input type="hidden" id="docTmpId" name="docTmpId" value="${capService.docTmpId}">
            <label for="name" class="layui-form-label">
                业务名称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" lay-verify="name"
                       autocomplete="off" class="layui-input" value="${capService.name}">
            </div>
        </div>

        <div class="layui-inline">
            <label for="sysOfficeId" class="layui-form-label">
                所属部门
            </label>
            <div class="layui-input-inline">
                <select name="sysOfficeId" id="sysOfficeId"  class="search_input" style="height:30px;width:120px;" lay-search></select>
            </div>
        </div>

    </div>
    <div class="layui-form-item">


        <div class="layui-inline">
            <label for="serviceTypeId" class="layui-form-label">
                业务类型
            </label>
            <div class="layui-input-inline">
                <select name="serviceTypeId" id="serviceTypeId"  lay-filter="serviceTypeId" class="search_input" style="height:30px;width:120px;" lay-search></select>
            </div>
        </div>

        <div class="layui-inline">
            <label for="serviceKindId" class="layui-form-label">
                业务分类
            </label>
            <div class="layui-input-inline">
                <select name="serviceKindId" id="serviceKindId"  class="search_input" style="height:30px;width:120px;" lay-search></select>
            </div>
        </div>

    </div>
<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-block" style="width:73%">
        <textarea placeholder="请输入备注" class="layui-textarea" name="remarks">${capService.remarks}</textarea>
    </div>
</div>
    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend style="font-size:16px;">所需材料</legend>
        </fieldset>
    </div>
    <table class="layui-table" lay-filter="test" id="tableAdd">
        <colgroup>
            <col width="10%">
            <col width="30%">
            <col width="20%">
            <col width="30%">
            <col width="10%">
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th>材料名称</th>
            <th>是否必填</th>
            <th>材料要求</th>
            <th style="text-align: center"><button type="button" class="layui-btn add-btn">添加</button></th>
        </tr>
        </thead>
        <tbody class="addlists" id="documentTbody">

        </tbody>
    </table>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">材料总体说明</label>
        <div class="layui-input-block" style="width:73%">
            <textarea placeholder="请输入材料总体说明" class="layui-textarea" name="docSummary">${capService.docSummary}</textarea>
        </div>
    </div>
    <div class="layui-from-item">
        <div style="text-align:center">
            <#if (detail!="readonly")>
            <button class="layui-btn layui-btn-normal" lay-filter="add" lay-submit="">
                确定
            </button>
        </#if>
        <button class="layui-btn layui-btn-primary" id="close">
            关闭
        </button>
    </div>
</form>
<script type="text/html" id="serviceTypeTpl">
    <option value=""></option>
    {{#layui.each(d.list,function(index,item){ }}
    <option  value="{{item.id}}" {{item.checked==true?'selected':''}} >{{item.name}}</option>
    {{# }); }}
    {{# if(d.list.length==0){ }}
    无数据
    {{# }}}

</script>
<script type="text/html" id="documentListTpl">

    {{#layui.each(d.list,function(index,item){ }}
    <tr>
        <td>
            <input value="{{item.sort}}" type="text" name="number{{item.id}}" class="layui-input"/>
            <input type="hidden" name="docFlag{{item.id}}" value="1"/>
        </td>
        <td>
            <input type="text" name="docName{{item.id}}" value="{{item.name}}" class="layui-input" id="docName{{item.id}}">
        </td>
        <td>
            <select name="noneEmpty{{item.id}}" lay-filter="noneEmpty" id="noneEmpty{{item.id}}">
               {{# if(item.noneEmpty=='0'){ }}
                    <option value="">请选择</option>
                    <option value="0" selected>否</option>
                    <option value="1">是</option>
               {{# }else if(item.noneEmpty=='1'){ }}
                    <option value="">请选择</option>
                    <option value="0" selected>否</option>
                    <option value="1" selected>是</option>
                {{# }else{ }}
                    <option value="">请选择</option>
                    <option value="0" >否</option>
                    <option value="1">是</option>
                {{# }}}
            </select>
        </td>
        <td>
            <input type="text" name="docRemarks{{item.id}}" value="{{item.docRemarks}}"class="layui-input">
        </td>
        <td style="text-align: center"><button type="button" class="layui-btn layui-btn-danger btn-del">删除</button></td>
    </tr>


    {{# }); }}
    {{# if(d.list.length==0){ }}
    无数据
    {{# }}}

</script>
<script>
  var flag,msg;
   layui.use(['laytpl','form'],function(){
    var laytpl = layui.laytpl;
    var form = layui.form;
    loadAllType("/office/loadAllOffice",'${capService.sysOfficeId}',"sysOfficeId");
    loadAllType("/type/loadAllServiceType",'${capService.serviceTypeId}',"serviceTypeId");
    loadAllType("/kind/getKindList?serviceTypeId=${capService.serviceTypeId}",'${capService.serviceKindId}',"serviceKindId");
    function loadAllType(url,formFieldValue,divId){
        $.ajax({
           url:url,
           type:'get',
           success:function(res){
                if(res.flag){
                   $("#"+divId).empty();
                   var html="<option></option>";

                   $(res.jsonObj.data).each(function(v,k){
                    if(formFieldValue==k.id){
                        html+="<option value='"+k.id+"' selected='selected'>"+k.name+"</option>";
                    }else{
                          html+="<option value='"+k.id+"'>"+k.name+"</option>";
                    }
                   });
                   $("#"+divId).append(html);
                    form.render('select');

                }

           },
           beforeSend:function(){
<!--              layer.msg('加载中');-->
           }
        })
  }

  });
  layui.use(['form','layer','laytpl'], function(){
    $ = layui.jquery;
    var form = layui.form
        ,layer = layui.layer
        ,laytpl = layui.laytpl;


    //自定义验证规则
    form.verify({
      name: function(value){
        if(value.trim()==""){
          return "业务类型名称不能为空";
        }
      }
    });
    loadDocumentList();

    function loadDocumentList(){
        $.ajax({
            url:'/document/getDocumentList',
            data:{
                serviceId:'${capService.id}',
                busId:null
            },
            type:'get',
            dataType:'json',
            success:function(res){
                if(res.flag){
                    var data={},list=[];
                    data.title=res.msg;
                    res.jsonObj.data.forEach(function(value,index){
                        list.push(value);
                    },this)

                }
                data.list = list;
                console.log(data); 
                loadTpl(data,'documentListTpl','documentTbody');
            },
            error:function(){
                console.log(error);
            }

        });

    }
        function loadTpl(data,templateId,divId){

            var getTpl = document.getElementById(templateId).innerHTML
                            ,view = document.getElementById(divId);
            laytpl(getTpl).render(data,function(html){
                view.innerHTML=html;
            });
            form.render();
        }

    })
   $('#close').click(function(){
     var index = parent.layer.getFrameIndex(window.name);
     parent.layer.close(index);
     return false;
   });
    //监听提交
    layui.use(['form','table'],function(){
    var form = layui.form,table=layui.table;
         form.on('submit(add)', function(data){
                var doc = getDynDom();
                var docInfoList = JSON.stringify(doc);
                console.log(docInfoList);
               $.ajax({
                    url:"/document/batchHandleFile",
                    data:docInfoList,
                    type:"post",
                    dataType:"json",
                    contentType:"application/json",
                    success:function (res) {
                      console.log(res);
                      if(res.flag){
                            layerAjax('addService', data.field, 'serviceList');
                      }
                    },
                    error:function(){
                            layui.layer.msg("系统异常");
                    }
                })

              return false;
    });
<!--    table.render({-->
<!--    -->
<!--    -->
<!--    -->
<!--    });-->
<!--    form.render();-->
    form.on('select(serviceTypeId)',function(data){
      var val = data.value;
      if(val){
        $.ajax({
          url:"/kind/getKindList",
          data:{
            serviceTypeId:val
          },
          type:"get",
          dataType:"json",
          success:function(res){
               console.log(res);
              if(res.flag){
               $("#serviceKindId").empty();
                   var html="<option></option>";
                   $(res.jsonObj.data).each(function(v,k){
                      html+="<option value='"+k.id+"'>"+k.name+"</option>";
                    });
                $("#serviceKindId").append(html);
                 form.render('select');
              }
          },
          error:function(){
            console.log("服务器异常");
          }

        });

      }
  });










    });

    function getDynDom(){
        var docArray=new Array();
        for(var i=0; i<$("input[name^='docName']").length; i++){
          var docInfo={};
          var docNameValue=$("input[name^='docName']")[i].value;
          var noneEmptyValue=$("select[name^='noneEmpty']")[i].value;
          var docRemarksValue=$("input[name^='docRemarks']")[i].value;
          var numberValue=$("input[name^='number']")[i].value;
          var docFlag=$("input[name^='docFlag']")[i].value;
          docInfo.name=docNameValue;
          docInfo.noneEmpty=noneEmptyValue;
          docInfo.docRemarks=docRemarksValue;
          docInfo.sort=numberValue;
          docInfo.docFlag=docFlag;
          docInfo.tmpId='${capService.docTmpId}';

          docArray.push(docInfo);
        }
        return docArray;
    }





</script>
</body>

</html>
